
<template>
  <div class="credit-setting">
    <!--信用调整审批-->
    <el-form
      :inline="true"
      label-position="right"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="40"
        style="margin-left: 0px;margin-right:0px;"
      >
        <el-col :span="8">
          <el-form-item
            label="流程编号："
            style="width: 100%;"
          >
            <span>{{ detailData.processNo }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建时间："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd HH:MM', detailData.startTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="创建人："
            style="width: 100%;"
          >
            <span>{{ detailData.initiator }}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="data">
        <el-col
          :lg="24"
          :xs="4"
          style="padding-left: 0;padding-right: 0"
        >
          <item-title title="信用详情" />
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="客户类型："
            style="width: 100%;"
          >
            <div v-if="data?.creditType">{{ getLabel('contract_object', data?.creditType) }}</div>
            <div v-else>无</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="客户名称："
            style="width: 100%;"
          >
            <div>{{ getClientName(data?.creditType) }}</div>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="应收最大额度："
            label-width="180"
            style="width: 100%;"
          >
            <div
              v-if="data?.quota!==data?.newQuota"
              class="flow-status-color"
            >
              <span>{{ data?.quota>0? data?.quota + '元':'不限额' }}</span>
              <span style="padding:0px 5px">--></span>
              <span>{{ data?.newQuota>0?data?.newQuota + '元':'不限额' }}</span>
            </div>
            <div v-else>
              <span>{{ data?.quota>0?data?.quota:'不限额' }}</span>
            </div>
          </el-form-item>
        </el-col>
        <template v-if="data?.creditType==='distribute'">
          <el-col
            :lg="24"
            :xs="4"
            style="padding-left: 0;padding-right: 0"
          >
            <item-title title="库存最大上限" />
          </el-col>

          <el-col
            :lg="24"
            :xs="4"
            style="padding-left: 0;padding-right: 0"
          >
            <el-table
              :data="data?.products"
              header-cell-class-name="table-header"
              size="medium"
              border
              :cell-style="cellStyle"
              @row-click="aloneClick"
            >
              <el-table-column
                prop="productPopularName"
                label="通用名"
                header-align="center"
              >
                <template #default="scope">
                  <div>
                    {{ scope.row.productInfoDetail?.productPopularName }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="approvalNumber"
                label="批准文号"
                header-align="center"
              >
                <template #default="scope">
                  <div>
                    {{ scope.row.productInfoDetail?.approvalNumber }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="packSpecs"
                label="包装规格"
                header-align="center"
              >
                <template #default="scope">
                  <div>
                    {{ scope.row.productInfoDetail?.packSpecs }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="producer"
                label="生产厂家"
                header-align="center"
              >
                <template #default="scope">
                  <div>
                    {{ scope.row.productInfoDetail?.producer }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="sellUnit"
                label="计价单位"
                header-align="center"
                align="center"
              >
                <template #default="scope">
                  <div>
                    {{ getLabel('sell_unit', scope.row.productInfoDetail?.sellUnit) }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                prop="capacity"
                label="允许最大库存上限"
                header-align="center"
              >
                <template #default="scope">
                  <div>
                    <div v-if="scope.row.capacity !==scope.row.newCapacity">
                      <span>{{ scope.row.capacity>0?scope.row.capacity:'不限' }}</span>
                      <span>--></span>
                      <span>{{ scope.row.newCapacity>0?scope.row.newCapacity:'不限' }}</span>
                    </div>
                    <div v-else><span>{{ scope.row.capacity }}</span></div>
                  </div>
                </template>
              </el-table-column>

            </el-table>
          </el-col>
        </template>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { reactive, toRefs, watch } from 'vue'

export default {
  name: 'Index',
  props: {
    detailData: {
      type: Object,
      default: () => {},
    },
  },
  setup(props, context) {
    var reactiveData = reactive({
      detailData: {},
      data: props.detailData.data || {},
    })
    const getClientName = (creditType) => {
      var name = ''
      if (creditType === 'agent') {
        name = reactiveData.data.agentDetail.agentName
      } else if (creditType === 'distribute') {
        name = reactiveData.data.distributeInfoDetail.distributeName
      } else if (creditType === 'seller') {
        name = reactiveData.data.sellerDetail.sellerName
      }
      return name
    }
    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval) {
          reactiveData.detailData = newval
          reactiveData.data = newval.data
        }
      },
      { immediate: true, deep: true }
    )
    return {
      ...toRefs(props),
      ...toRefs(reactiveData),
      getClientName,
    }
  },
}
</script>

<style scoped>
/* @import url(); 引入css类 */
</style>
